import "KaiUI/src/components/Header/Header.scss";
import classNames from "classnames";
import "./blink.css";
import { createTextVNode, Component } from "inferno";

class Header extends Component {
  constructor(props) {
    super(props);
    const { text, backgroundColor, forwardedRef, blink } = props;
    this.backgroundColor = backgroundColor;
    this.forwardedRef = forwardedRef;
    this.state = {
      text: text,
      blink: blink,
    };
    console.log(`[ui/Header] text: ${text}`);
  }

  render() {
    return (
      <header
        className="kai-header"
        style={{ background: this.backgroundColor }}
        ref={this.forwardedRef}
      >
        <h1
          className={classNames("h1", this.state.blink && "blink1s")}
          $HasVNodeChildren
        >
          {createTextVNode(this.state.text)}
        </h1>
      </header>
    );
  }
}

export default Header;
